import { Card, Row, Col, Statistic, Button } from 'antd'
import { TeamOutlined, TrophyOutlined, FileTextOutlined, UserOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

export default function Home() {
  const navigate = useNavigate()

  const quickActions = [
    {
      title: '族谱管理',
      icon: <TeamOutlined style={{ fontSize: 24, color: '#3b82f6' }} />,
      description: '查看和管理家族族谱',
      action: () => navigate('/family-tree'),
      color: '#e0f2fe',
    },
    {
      title: '荣誉榜',
      icon: <TrophyOutlined style={{ fontSize: 24, color: '#f59e0b' }} />,
      description: '家族荣誉展示',
      action: () => navigate('/honors'),
      color: '#fef3c7',
    },
    {
      title: '族规管理',
      icon: <FileTextOutlined style={{ fontSize: 24, color: '#10b981' }} />,
      description: '活动和族规模板',
      action: () => navigate('/clan-rules'),
      color: '#d1fae5',
    },
    {
      title: '个人中心',
      icon: <UserOutlined style={{ fontSize: 24, color: '#8b5cf6' }} />,
      description: '个人信息管理',
      action: () => navigate('/profile'),
      color: '#ede9fe',
    },
  ]

  return (
    <div style={{ padding: '0 8px' }}>
      <Card title="欢迎使用家族族谱管理系统" style={{ marginBottom: 16 }}>
        <p style={{ color: '#666', lineHeight: 1.6 }}>
          这是一个现代化的家族族谱管理系统，帮助您数字化管理家族信息，
          记录家族荣誉，制定族规模板，并通过AI智能助手获得更好的使用体验。
        </p>
      </Card>

      <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic title="家族成员" value={0} prefix={<UserOutlined />} />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic title="荣誉记录" value={0} prefix={<TrophyOutlined />} />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic title="活动模板" value={0} prefix={<FileTextOutlined />} />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card>
            <Statistic title="族规数量" value={0} prefix={<FileTextOutlined />} />
          </Card>
        </Col>
      </Row>

      <Card title="快速操作" style={{ marginBottom: 16 }}>
        <Row gutter={[16, 16]}>
          {quickActions.map((action, index) => (
            <Col xs={24} sm={12} lg={6} key={index}>
              <Card
                hoverable
                style={{ backgroundColor: action.color, border: 'none' }}
                styles={{ body: { textAlign: 'center', padding: 24 } }}
                onClick={action.action}
              >
                <div style={{ marginBottom: 16 }}>
                  {action.icon}
                </div>
                <h3 style={{ margin: '0 0 8px 0', color: '#1f2937' }}>
                  {action.title}
                </h3>
                <p style={{ margin: 0, color: '#6b7280', fontSize: '14px' }}>
                  {action.description}
                </p>
              </Card>
            </Col>
          ))}
        </Row>
      </Card>

      <Card title="系统公告">
        <p style={{ color: '#666', lineHeight: 1.6 }}>
          <strong>欢迎使用系统！</strong><br/>
          系统正在开发中，更多功能敬请期待。如有任何问题或建议，请及时联系管理员。
        </p>
      </Card>
    </div>
  )
}